<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .red {
            background-color: red;
        }
        
        .yellow {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <!-- 
    2.class与style
2-1 class的绑定-方法太多了
对象写法
data(){
  return {
    classObject:{
      active: true,
      'text-danger': false
    }
  }
}   
<div :class="classObject"></div>

数组写法

   -->
    <div id="box">
        <!-- 指令 -->
        <div v-bind:class="color">11111111</div>
        <!-- 三目 -->
        <div :class="islogin?'red':'yellow'">2222222</div>
        <!-- 对象 -->
        <div :class="classObject">33333</div>
        <!-- 数组 -->
        <div :class="classArr">4444444</div>
    </div>
    <script>
        var obj = {
                data() {
                    return {
                        name: '张三',
                        classObject: {
                            red: true,
                            yellow: false
                        },
                        islogin: true,
                        color: 'red',
                        classArr: ['red', 'yellow']
                    }
                }
            }
            //在控制台，输入app.classArr,可以拦截到：Proxy(Array) {0: 'red', 1: 'yellow'}
            //在控制台，输入app.classArr.push('blue')，即可动态添加blue类名。
            //在控制台，输入app.classArr.pop()，即可动态删除blue类名。
            //在控制台，输入app.classArr.splice(1,1,'green')，即可动态删除原来的yellow类名，并添加新的
            //green类名。

        var app = Vue.createApp(obj).mount('#box')
    </script>
</body>

</html>